<!--
 * @Author: wwssaabb
 * @Date: 2021-06-21 11:13:51
 * @LastEditTime: 2021-06-21 16:22:18
 * @FilePath: \sass_demo\Smoke Text\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Smoke Text</title>
  <link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <section>
    <p>Have you ever wondered about the stars? In some ways, stars are like people. They are
      born. They grow old. And they die. A star is born from dust and gas. Slowly the dust and
      gas make a ball. The ball gets very hot. Then it starts to give off light. The young star grows
      into a giant. Many years go by. The older star begins to get small again. At last its light
      goes out. The star’s life is over.</p>
  </section>
  <div class="btn_action">action</div>
  <div class="btn_reverse">reverse</div>
  <div class="btn_reset">reset</div>
  
  <script type="text/javascript">
    let p=document.querySelector('p')
    p.innerHTML=p.innerHTML.replace(/\S/g,"<span>$&</span>")
    let btn_action=document.querySelector('.btn_action')
    let btn_reset=document.querySelector('.btn_reset')
    let btn_reverse=document.querySelector('.btn_reverse')
    
    let spans=document.querySelectorAll('span')
    console.log(spans)
    spans.forEach(i => {
      i.addEventListener('mousemove',()=>{
        i.className='action'
      })
    });
    btn_action.addEventListener('click',()=>{
      let current=0
      spans.forEach((i,index)=>{
        if(i.className!=='action'){
          current=index===0?0:current+1
        }
        setTimeout(()=>{
          i.className='action'
        },current*100)
      })
    })
    btn_reset.addEventListener('click',()=>history.go(0))
    btn_reverse.addEventListener('click',()=>{
      if(Array.from(spans).every(i=>i.className==='')){
        spans.forEach(i=>i.className='action')
      }
      let current=0
      spans.forEach((i,index)=>{
        if(i.className==='action'){
          current=index===0?0:current+1
        }
        setTimeout(()=>{
          i.className='action_reverse'
        },current*100)
      })
    })
  </script>
</body>
</html>